<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Amazon Coupon Distribution Administrator Platform</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- <script src="js/jquery.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" type="text/css" href="css/excel-bootstrap-table-filter-style.css">
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <!-- 搜索框 -->
    <!-- <link rel="stylesheet" type="text/css" href="css/search-form.css"> -->
</head>

<body>
    <div id="app">
        <div id="wrapper" class="container">
            <!-- 搜索框 -->
              <!-- 搜索框 -->

              <!-- <form onsubmit="submitFn(this, event);">
              <div class="search-wrapper">
                  <div class="input-holder">
                      <input type="text" class="search-input" placeholder="Type to search" />

                      <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                  </div>
                  <span class="close" onclick="searchToggle(this, event);"></span>
                  <div class="result-container">
      
                  </div>
              </div>
          </form>
       -->
      
                
                    
            <div class="overlay"></div>

            <!-- Sidebar -->
            <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
                <ul class="nav sidebar-nav">
                    <li class="sidebar-brand">
                        <a href="#">
                            Management Platform
                        </a>
                    </li>
                    <li>
                        <a href="User-Information.html"><i class="fa fa-fw fa-home"></i> User Information</a>
                    </li>
                    <li>
                        <a href="Coupon-Information.html"><i class="fa fa-fw fa-folder"></i> Coupon Information</a>
                    </li>
                    <li>
                        <a href="Product-Information.html"><i class="fa fa-fw fa-file-o"></i> Product Information</a>
                    </li>
                </ul>
            </nav>
            <!-- /#sidebar-wrapper -->

            <!-- Page Content -->
            <div id="page-content-wrapper">
                <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                    <span class="hamb-top"></span>
                    <span class="hamb-middle"></span>
                    <span class="hamb-bottom"></span>
                </button>
                <!-- 主页面内容 -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered table-hover table-striped table-intel" id="table">
                                <thead>
                                    <tr>
                                        <th class="no-filter no-sort no-search none">Id</th>
                                        <th class="no-filter no-sort">User Name</th>
                                        <th class="no-filter">Trade Name</th>
                                        <th class="no-filter">Discount</th>
                                        <th class="no-filter no-sort">Date of issuance</th>
                                        <th class="no-filter no-sort">Valid date</th>
                                        <th class="no-filter no-sort">Whether to use</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    <tr v-for="item in list" :key="item.userId">
                                        <td>{{ item.couponRecordId }}</td>
                                        <td v-text="item.email"></td>
                                        <td v-text="item.productName"></td>
                                        <td v-text="item.finalDiscount"></td>
                                        <td v-text="item.distributeTime"></td>
                                        <td v-text="item.VDate"></td>
                                        <td v-text="item.WTUse"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- 表格结束 -->
                        </div>
                    </div>

                </div>
                <!-- 结束主页面内容 -->
                <!-- /#page-content-wrapper -->

            </div>
        </div>
    </div>
    <!-- /#wrapper -->

    <!-- <script src="js/jquery-1.8.3.min.js"></script> -->
    
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var trigger = $('.hamburger'),
                overlay = $('.overlay'),
                isClosed = false;

            trigger.click(function () {
                hamburger_cross();
            });

            function hamburger_cross() {

                if (isClosed == true) {
                    overlay.hide();
                    trigger.removeClass('is-open');
                    trigger.addClass('is-closed');
                    isClosed = false;
                } else {
                    overlay.show();
                    trigger.removeClass('is-closed');
                    trigger.addClass('is-open');
                    isClosed = true;
                }
            }

            $('[data-toggle="offcanvas"]').click(function () {
                $('#wrapper').toggleClass('toggled');
            });
        });
    </script>
    <!-- 排序、搜索 -->
    <script type="text/javascript" src="js/excel-bootstrap-table-filter-bundle.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#table').excelTableFilter({
                'captions': { search: 'Search', a_to_z: 'Ascending order', z_to_a: 'descending order'}
            });
        });
    </script>
    <!-- 搜索框 -->
    <!-- <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function searchToggle(obj, evt){
            var container = $(obj).closest('.search-wrapper');
    
            if(!container.hasClass('active')){
                  container.addClass('active');
                  evt.preventDefault();
            }
            else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
                  container.removeClass('active');
                  // clear input
                  container.find('.search-input').val('');
                  // clear and hide result container when we press close
                  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
            }
        }
    
        function submitFn(obj, evt){
            value = $(obj).find('.search-input').val().trim();
    
            _html = "Yup yup! Your search text sounds like this: ";
            if(!value.length){
                _html = "Yup yup! Add some text friend :D";
            }
            else{
                _html += "<b>" + value + "</b>";
            }
    
            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.result-container').fadeIn(100);
    
            evt.preventDefault();
        }
    </script> -->
    <!-- 创建vue实例 -->
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    couponRecordId: '',  
                    productName: '',
                    email: '',
                    finalDiscount: '',
                    distributeTime: '',
                    VDate:'' ,
                    WTUse: '',
                    list: []
                }
            },
            created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
                this.getAllList()
            },
            methods: {
                getAllList() {
                    this.$http.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/CouponRecordController/handleGetAllCouponRecords').then(result => {
                        // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                        var res = result.data;
                        console.log(res)
                        if (res.statu === 10000) {
                            // 成功了
                            this.list = res.data
                        } else {
                            // 失败了
                            alert('获取数据失败！')
                        }
                    })

                },
            }
        })
        // { Id: 1, Username: '123456@163.com', Tradename: 'Badminton racket',  Discount: '10%',DOIssuance:new Date(), VDate:new Date() ,WTUse: 'No' },
                // { Id: 2, Username: '56942@163.com', Tradename: 'Chocolates', Discount: '5%', DOIssuance:new Date()  , VDate:new Date() ,   WTUse: 'Yes' },
                // { Id: 3,  Username: '123456@163.com', Tradename: 'Dress',Discount: '12%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'No' },
                // { Id: 4,  Username: '32654@163.com',Tradename: 'Eye shadow', Discount: '10%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'Yes' },
                // { Id: 5, Username: '5689@163.com',  Tradename: 'Table Tennis', Discount: '10%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'No' },
                // { Id: 6,  Username: '56942@163.com', Tradename: 'Ice cream', Discount: '20%',DOIssuance:new Date()  , VDate:new Date() , WTUse: 'Yes' },
                // { Id: 7,  Username: '123456@163.com',Tradename: 'Short sleeve', Discount: '5%',DOIssuance:new Date()  , VDate:new Date() , WTUse: 'No' },
                // { Id: 8, Username: '32654@163.com',  Tradename: 'Lipstick', Discount: '5%',DOIssuance:new Date()  , VDate:new Date() , WTUse: 'Yes' },
                // { Id: 9, Username: '12654@163.com', Tradename: 'snacks', Discount: '8%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'No' },
                // { Id: 10,Username: '32654@163.com', Tradename: 'shorts',  Discount: '5%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'No' },
                // { Id: 11,  Username: '52654@163.com',Tradename: 'Volleyball', Discount: '10%',DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'Yes' },
                // { Id: 12,  Username: '82654@163.com', Tradename: 'Blush', Discount: '15%',DOIssuance:new Date()  , VDate:new Date() , WTUse: 'No' },
                // { Id: 13,  Username: '32654@163.com', Tradename: 'Prawn cracker', Discount: '5%', DOIssuance:new Date()  , VDate:new Date() ,WTUse: 'No' },
    </script>
    


</body>

</html>
